Ejemplos de JavaScript

Aquí podrás encontrar algunas aplicaciones de JavaScript para que puedas mejorar la presentación de tus páginas Web. Para ver el código de la mayoría de los Scripts no tienes más que emplear la opción de "Ver código del documento" de tu navegador. Si tienes alguna sugerencia o quieres ampliar esta colección, envíame un mail a mi dirección de correo:

alonso@eucmos.sim.ucm.es

Por cierto, lo primero que has encontrado en esta página es un sencillo Script, que te permite hacer saludos personalizados. Su código es el siguiente:

var nombre=prompt("Introduce tu nombre :","Escribe tu nombre aqui");
document.write("Bienvenid@"+" "+nombre+);

No te olvides de poner las etiquetas que indican que es un Script.

Qué día es hoy?

JavaScript provee al usuario de una clase Date, con varios constructores y métodos para generar y manipular sus objetos. Un uso muy típico de ella es imprimir la fecha y la hora actual.

También puede resultar interesante y simple decirle al usuario cuando fue la última vez que la página se actualizó, pero de forma que esta fecha se actualice automáticamente.

Incluso podemos informar de cuántos días faltan para que finalice el año actual (o cualquier otro si se modifica correctamente el Script).

No me pises que llevo chanclas

JavaScript permite controlar algunos eventos que se producen en el sistema por la interacción del usuario. Un ejemplo muy simple, y a la vez curioso, es el que detecta el paso del ratón por una zona determinada de la página. Puedes probarlo pasando el ratón sobre la baldosa roja.

Pasa por
aquí

Recuerda que los eventos son acciones que ocurren usualmente como resultado de la intervención del usuario. Por ejemplo, pulsar un botón es un evento, así como modificar el campo de un formulario o mover el ratón sobre un enlace. El programador puede definir controladores de eventos (los llamados event handlers), como onChange u onClick, para hacer que sus Scripts sean sensibles a estos eventos. Los más importantes los tienes enumerados a continuación:

Evento	Se aplica a	Sucede si	Controlador del evento
abort	Imágenes	El usuario aborta la carga de una imagen	onAbort
blur	Ventanas, frames y todos los campos de formularios	El usuario elimina el cursor del objeto	onBlur
click	Botones, enlaces y formularios de confirmación	El usuario hace click sobre el elemento	onClick
change	Campos de texto de formularios y listas de selección	El usuario modifica el valor del elemento	onChange
error	Imágenes y ventanas	La carga de un documento o una imagen causa un error	onError
focus	Ventanas, frames y todos los campos de formularios	El usuario sitúa el cursor sobre el elemento	onFocus
load	Cuerpo de un documento HTML	El usuario carga la página correspondiente en el navegador	onLoad
mouseout	Áreas y enlaces	El ratón deja de estar encima del área o del enlace	onMouseOut
mouseover	Enlaces	El ratón está sobre el enlace	onMouseOver
reset	Formularios	El usuario vacía un formulario con el botón de Reset	onReset
select	Campos de texto de formularios	El usuario elige el campo del formulario	onSelect
submit	Botones de envío	El usuario envía un formulario	onSubmit
unload	Cuerpo de un documento HTML	El usuario descarga una página del navegador	onUnload

Cambia de color

En este caso te ofrecemos un Script que te permitirá modificar el color de fondo de tu página. Para hacerlo sólo tendrás que pulsar las distintas celdas de la tabla. Del mismo modo, cada uno de los botones que aparece en su parte inferior es un color diferente.

Scroll en un formulario

Este Script te permite insertar un scroll en un formulario o en la barra de estado para que esté siempre visible. A ambos lados de la caja del texto tienes sendos botones, que permiten visualizar el mensaje o borrarlo.

Para programar correctamente este tipo de aplicaciones, debes considerar los métodos setTimeout y clearTimeout:

El primero de ellos tiene dos argumentos, más concretamente, su sintaxis es setTimeout(nombreFunción,tiempo), y el comportamiento es muy sencillo; ejecuta las instrucciones de nombreFunción a intervalos de tiempo regulares determinados por el segundo argumento (en general, se dice que setTimeout evalúa la expresión del primer argumento con el retraso indicado por el segundo). Como puedes suponer nombreFunción es el nombre de una función ya declarada, y tiempo viene dado en milisegundos. Es importante que tengas en cuenta que el resultado de todo este comportamiento es un valor, que sólo puede ser empleado como identificador y asignado a una variable.
Por su parte clearTimeout tiene un único argumento, que debe ser un identificador, clearTimeout(timeoutId). Su uso razonable es situar en él el resultado de un setTimeout, y su efecto es el de detener la ejecución de éste último.

Scroll en la barra de estado

Si te has fijado atentamente en el código del ejemplo anterior, habrás observado que puede modificarse fácilmente para que el scroll aparezca en la barra de estado. Para conseguirlo no tienes más que sustituir la línea que sitúa el texto en el formulario, por la siguiente:

window.status=textodonde texto es la variable que contiene el mensaje visualizado. Para comprobar el efecto que se produce en una página con scroll en la barra de estado, puedes emplear los dos botones que encontrarás a continuación. Otro ejemplo de lo que se puede hacer con la barra de estado es mostrar mensajes en ella que hagan referencia a otras páginas. Más concretamente, podemos conseguir que al pasar el ratón por encima de un enlace, se nos dé una breve descripción de a qué página iremos si hacemos click en él. Para ello disponemos del controlador de eventos onMouseOver, que ya hemos empleado en el Script "No me pises que llevo chanclas", y de onMouseOut, que detecta cuando el ratón deja de estar encima del enlace.

Grupo de Concurrencia

Test de JavaScript

En esta ocasión te ofrecemos un Script que sólo será visible si tu navegador soporta JavaScript. Su código es extremadamente sencillo, y puedes encontrarlo en muchas páginas de JavaScript.

Del mismo modo podemos identificar el navegador que está siendo utilizado para acceder a nuestra página, e incluso hacer preguntas sobre él.

Estas cuestiones las podemos resolver gracias a navigator, que es uno de los objetos básicos en la jerarquía JavaScript. Es independiente de window, y permite averiguar varias características del navegador que estamos empleando para visualizar los documentos HTML. Todos sus atributos son de sólo lectura, esto es, no pueden modificarse. A continuación listamos los más importantes:

navigator.appName: Almacena el nombre del navegador.
navigator.appVersion: Guarda el número principal de la versión.
navigator.language: Permite conocer el idioma del navegador activo.
navigator.platform: Indica la plataforma sobre la que que está ejecutándose el navegador actualmente.

Codificación de mensajes

El siguiente Script permite al usuario codificar el texto que desee. Para ello sólo debe introducirlo en el primer campo del formulario, y observar el resultado tras pulsar el botón de traducción.

Cambio dinámico de una imagen

En esta ocasión volvemos al control de eventos que se puede realizar gracias a JavaScript. Puedes observar cómo las flechas cambian de sentido al pasarles el ratón por encima. El código es mucho más sencillo de lo que podrías imaginar.

Intercambio de datos entre ventanas

Este Script te permitirá utilizar datos en una ventana, que han sido previamente introducidos en otra. Su funcionamiento es muy sencillo: al pulsar el botón de la izquierda se abrirá una nueva ventana en la que podrás introducir un dato numérico, si quieres verlo desde la ventana principal debes utilizar el botón "Ver Datos" y por último, cierra la ventana más pequeña. Si echas un vistazo al código, presta especial atención a la jerarquía de clases empleadas.

Ventanas comunicantes

Este ejemplo muestra la interacción entre dos ventanas que intercambian mensajes entre sí. La primera de ellas es la que contiene la página que estás leyendo en este momento, y en la que hemos colocado un formulario con un campo de ingreso de texto (etiqueta <TEXTAREA>) y un botón (etiqueta <INPUT TYPE='button'>) que al ser pulsado genera la segunda ventana. La interacción se produce gracias a la utilización del atributo opener del objeto window. Este atributo referencia la ventana desde la que se ha abierto la actual, de modo que si ventana es la segunda ventana abierta, ventana.opener debe almacenar un puntero (referencia) a la que contiene este texto. A continuación mostramos la función JavaScript responsable de la generación y gestión de la segunda página. En ella, formulario es el nombre del formulario que aparece a continuación y texto es el identificador asociado a su campo de ingreso de texto:
          function nuevaVentana( )
          {
             ventana=window.open(' ','NuevaVentana','width=400,height=300');
             ventana.opener=self;
             ventana.document.write("<HTML>");
             ventana.document.write("<HEAD><TITLE>Segunda ventana</TITLE></HEAD>");
             ventana.document.write("<BODY><CENTER>");
             ventana.document.write("Presiona el botón después de actualizar el formulario");
             ventana.document.write("<FORM NAME='notas'>");
             ventana.document.write("<TEXTAREA NAME='nota' ROWS=8 COLS=40>");
             ventana.document.write(document.formulario.texto.value);
             ventana.document.write("</TEXTAREA><P>");
             ventana.document.write("<INPUT TYPE='button' VALUE='Actualizar'
                onClick='opener.document.formulario.texto.value=document.notas.nota.value'>");
             ventana.document.write("</FORM>");
             ventana.document.write("</CENTER></BODY>");
             ventana.document.write("</HTML>");
             ventana.document.close();
          }
Gracias a este ejemplo, puedes comprobar que asociando identificadores a los elementos adecuados de una página, resulta extremadamente sencillo referenciar y realizar operaciones sobre el valor de los distintos campos de texto de los formularios. Así, es posible transmitir los mensajes de una ventana a otra, de forma que cualquiera de ellas puede modificar el texto procedente de la otra y enviar dichos cambios a la emisora del mensaje. Presta especial atención al empleo de la palabra reservada self que identifica el objeto activo en cada instante.

Cálculos matemáticos sencillos

El ejemplo que te presentamos a continuación permite efectuar cálculos sencillos a partir de los datos introducidos en un formulario. Para comprobarlo no tienes más que darnos los datos y pulsar los botones adecuados.

Tu propia calculadora

En este Script ampliamos los cálculos del ejemplo anterior, diseñando una pequeña calculadora que se comporta de manera muy similar a la que puedes encontrar en el pupitre de cualquier estudiante. Las operaciones que permite realizar son sumas, restas, productos, divisiones, cálculo de porcentajes y raíces cuadradas, aunque puedes ampliarla fácilmente añadiendo nuevas posibilidades.

El código JavaScript correspondiente está basado en el uso combinado de formularios y eventos, de modo que cada vez que pulsamos cualquiera de los botones se invoca a su función asociada a través del manejador de eventos onClick. El formulario diseñado se divide en dos partes dependiendo del tipo de la etiqueta <INPUT> (TYPE = 'text' o TYPE = 'button'); así la pulsación de cada botón tiene determinado efecto sobre el campo de texto, cuyo valor se denota mediante document.nombreFormulario.nombreCampoTexto.value. Recuerda que el tipo de sus datos es String, de modo que si deseamos hacer cálculos con ellos, el programador se ve obligado a convertirlos a un tipo numérico, empleando la función predefinida parseFloat.
Por último, has de tener en cuenta la posibilidad de realizar operaciones encadenadas y los casos en los que el usuario se equivoca pulsando consecutivamente varias teclas de cálculos. Todo ello se resuelve empleando dos variables distintas, a las que puedes llamar EsperaDato y OperacionPendiente. La primera de ellas es booleana e indica si es necesaria la introducción de un nuevo dato para el cálculo solicitado, mientras que la segunda es una cadena de caracteres que representa la última operación no realizada.

El juego del cuadrado

El juego que te proponemos a continuación consiste en marcar todas las casillas del tablero de juego. Sin embargo, no te resultará nada fácil, ya que cada vez que (des)marques una de ellas también se (des)marcarán sus vecinas, es decir, las casillas que están justo encima, debajo, a la izquierda, y a la derecha de la modificada.

Al igual que en el ejemplo anterior, para elaborar este Script hemos combinado la utilización de formularios y eventos, de modo que al pulsar sobre cualquier casilla sus vecinas se marcan o desmarcan de la forma correcta. En esta ocasión, se ha empleado un solo formulario en el que todos los campos son de tipo checkbox y donde se ha asignado un valor numérico a cada uno de ellos. Dicho valor sirve de parámetro de entrada de la función test, cuya misión es la de modificar el estado de los campos colindantes al indicado mediante una sencilla distinción de casos (recuerda que el estado de un formulario de confirmación se almacena en su atributo checked). Además, en cada pulsación se comprueba la situación global del tablero a través de la función testGanador, que decide si el juego ha terminado o no. Así, cada etiqueta <INPUT> del formulario se amplía con el manejador de eventos onClick del modo siguiente: <INPUT TYPE='checkbox' onClick='test(valor);testGanador()'> Para iniciar un nuevo juego basta con desmarcar todas las casillas del tablero, para lo cual hemos implementado la función desmarcarTodas que te mostramos a continuación:
                                        function desmarcarTodas()
                                        { for (var i=0; i<=numCasillas; i++)
                                           { document.form.elements[i].checked=0; }
                                        }
Puedes ampliar fácilmente este juego añadiendo diferentes niveles, de modo que al empezar a jugar haya ciertas casillas del tablero ya marcadas y cuyo estado no se pueda modificar. Cuantas más casillas marques inicialmente, más difícil será ganar.

Navegación a través de botones

Hasta este momento, ya hemos hecho uso de botones y formularios para la introducción y obtención de datos, y la modificación del aspecto de nuestra página Web. Lo que vamos a hacer a continuación es ofrecer al usuario la posibilidad de visitar otros lugares gracias a una persiana de enlaces, obtenida mediante los formularios de selección.

Además podemos simular el comportamiento de los botones del navegador que nos permiten llevar el control de la historia de la navegación, nos referimos a los botones de "Avanzar" y "Retroceder". Para ello sólo tenemos que emplear las propiedades y métodos del objeto history. Éste es un objeto derivado de window, que contiene todas las direcciones que se han visitado en la sesión actual. Una opción que no hemos empleado es la de ir a una dirección especificada mediante window.history.go(x) donde x es un número entero. De este modo saltamos x lugares hacia adelante en la historia (si x es positivo), o x lugares hacia atrás (si x es negativo).
Obviamente se tiene que window.history.go(1)=window.history.forward( ) y window.history.go(-1)=window.history.back( ).

La resolución de tu pantalla

El ejemplo anterior es una muestra de cómo se puede acceder a distintas referencias a través del objeto window. Entre ellas, además de history, encontramos la referencia screen, que contiene información (de sólo lectura) acerca de la pantalla del usuario y a la que se puede acceder directamente. A continuación te describimos detalladamente sus propiedades más importantes:

height y width devuelven la altura y la anchura de la pantalla medidas en pixels.
availHeight y availWidth especifican (también en pixels) la altura y la anchura disponibles en la pantalla, esto es, sus dimensiones totales menos las correspondientes a los elementos (semi)permanentes mostrados por el sistema operativo (como la barra de tareas de Windows).
pixelDepth mide la resolución del color de la pantalla en bits por pixel.

Con todos estos detalles es muy sencillo programar una función que muestre las características de la pantalla de nuestro visitante. Podría ser la siguiente:
                                        function propiedadesPantalla()
                                        { if (window.screen)
                                             mensaje=window.screen.width+"x"+window.screen.height;
                                             document.write(mensaje);
                                        }
En la codificación, es importante que compruebes si puedes acceder a la referencia screen, ya que ésta sólo se implementa en las versiones de los navegadores posteriores a la 4.0. Después de asegurarte de ello, puedes acceder a sus atributos a través del operador punto (.), almacenando los resultados en variables o manipulándolos directamente. Éste es el resultado de la función en tu caso:

Un pequeño buscador

En este Script hemos implementado un pequeño buscador de páginas Web. Su capacidad de búsqueda se estriba tanto en la base de datos que contiene como en las funciones avanzadas de JavaScript sobre el tratamiento de cadenas de caracteres.
La base de datos de la aplicación consiste en un vector cuyos elementos guardan la información más importante acerca de cada una de las páginas indexadas. Dicha información se compone a su vez de otro vector de longitud cuatro en el que se almacena la dirección URL, el título de la página, una breve descripción de la misma, y las palabras clave que determinarán su búsqueda.
Dada una clave, la obtención de resultados se realiza mediante la función buscarPalabra, cuyos parámetros de entrada son la mencionada clave (tras eliminar los acentos y las mayúsculas) y el índice de la base de datos desde donde se va a iniciar la búsqueda. Esta función devuelve como resultado la primera página, perteneciente al rango índice...baseDatos.length, relacionada con el término indicado, de modo que debemos iterar su ejecución para recorrer completamente la base de datos. Con cada iteración la función añadirEntrada actualiza la cadena de caracteres que almacena los resultados con la información adecuada de la base de datos, y tras finalizar la búsqueda, se muestra lo obtenido en una nueva ventana.
Por último, dos puntos importantes en ambos métodos son el uso de la función search y el borrado del contenido de una ventana, respectivamente. search realiza la búsqueda de una expresión regular en una cadena de caracteres dada, devolviendo como resultado el primer índice de la expresión regular en dicha cadena o -1 si la primera no se encuentra en la segunda; su sintaxis es cadena.search(expresión regular). Para borrar el contenido de una ventana antes de escribir en ella de nuevo, basta incluir las siguientes líneas de código:
ventana.document.close();
ventana.document.open();
Este pequeño truco resuelve la falta de efecto de la función de JavaScript document.clear().

Observación: La ventaja más importante de esta aplicación es que permite realizar búsquedas en el Web sin necesidad de emplear CGI's en el servidor, de forma que todo se ejecuta en tu ordenador. Sin embargo, su potencia está limitada por el tamaño de la base de datos y a medida que éste aumenta, el tiempo de carga de la página del buscador es mayor. Por otra parte, la implementación del Script se basa en la forma del array empleado como almacén de información, lo que dificulta la elaboración "mecánica" de la base de datos.

Otros Scripts interesantes

Puedes encontrar más ejemplos con sus correspondientes explicaciones en las siguientes páginas:

	Instrucciones Básicas de JavaScript
	Los objetos y sus propiedades
	Fundido de Colores
	Un Calendario en JavaScript
	Confirmación JavaScript
	Los Arrays en JavaScript
	Layers en JavaScript
	Validación de formularios
	El Sistema Periódico
	El Mirón
	Protección de Páginas
	Cookies y JavaScript

Observación: Es posible que algunos de los ejemplos no funcionen bien en tu navegador. En particular el ejemplo de los layers sólo puede ejecutarse en el Netscape 4.0 (o versiones posteriores). Tambiés es probable que algunos objetos aparezcan descolocados, si es así puedes enviarme un mail a la dirección que tienes al principio de esta página.

Escribe texto en el formulario antes de abrir la nueva ventana